{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "_Notes from Sep 7, 2017, CS110 Introduction to Computing, Bryn Mawr College. [Douglas Blank](mailto:dblank@cs.brynmawr.edu)._" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 1. What can you do with Processing?" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Some examples:\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "\n", "* [my twitter likes](https://twitter.com/favorites) @DougBlank\n", "* http://www.openprocessing.org/\n", "* https://processing.org/examples/\n", "\n", "Now, let's see what you can do! " ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 2. Jupyter and Processing" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 2.1 Jupyter" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Jupyter is the name of the system that you log into. It is running on a server at Bryn Mawr College. It allows you to run code in a variety of programming languages inside things called \"notebooks.\" Each notebook is made up of cells. Cells can have text (called \"markdown\", like this text).\n", "\n", "You can turn on Spell-checking and the in-class exercise Submit by:\n", "\n", "1. Turning on the Spell-check and Submit extension in the Nbextensions Tab.\n", "2. Clicking the button in the toolbar.\n", "\n", "You can control how a cell is treated (code or markdown) by selecting from the picklist in the toolbar. You can select Markdown (like this cell), or Code. You can edit a markdown cell by double-clicking it, editing it, and then Shift+Enter.\n", "\n", "**New function**:\n", "\n", "```\n", "text(\"String in double quotes\", x, y);\n", "```\n", "\n", "**NOTE**: On your Lab1, make sure you put your name on your art using the Text() function." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You can put code in a cell, like this:" ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [ { "data": { "application/javascript": [ "\n", " var component = document.getElementById(\"sketch_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"state_1\");\n", " if (component != undefined)\n", " component.remove();\n", " component = document.getElementById(\"controls_div_1\");\n", " if (component != undefined)\n", " component.remove();\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " // FIXME: Stop all previously running versions (?)\n", " var processingInstance = Processing.getInstanceById(\"canvas_1\");\n", " if (processingInstance != undefined && processingInstance.isRunning())\n", " processingInstance.noLoop();\n", " });\n", "\n", "\n", " var output_area = this;\n", " // find my cell element\n", " var cell_element = output_area.element.parents('.cell');\n", " // which cell is it?\n", " var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n", " // get the cell object\n", " var cell = Jupyter.notebook.get_cell(cell_idx);\n", "\n", " function jyp_print(cell, newline) {\n", " return function(message) {\n", " cell.get_callbacks().iopub.output({header: {\"msg_type\": \"stream\"},\n", " content: {text: message + newline,\n", " name: \"stdout\"}});\n", " }\n", " }\n", " window.jyp_println = jyp_print(cell, \"\\n\");\n", " window.jyp_print = jyp_print(cell, \"\");\n", "\n", " require([window.location.protocol + \"//calysto.github.io/javascripts/processing/processing.js\"], function() {\n", " Processing.logger.println = jyp_print(cell, \"\\n\");\n", " Processing.logger.print = jyp_print(cell, \"\");\n", " });\n", "\n", "\n", " " ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/html": [ "\n", "
\n", " Sketch #1:
\n", "
\n", "
\n", "
\n", " \n", " \n", " \n", " \n", "
\n", "Sketch #1 state: Loading...
\n", "\n" ], "text/plain": [ "" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "fill(0);\n", "text(\"This is a sketch\", 10, 15);\n", "text(\"You can write\", 10, 30);\n", "text(\"and draw:\", 10, 45);\n", "fill(255, 0, 0);\n", "ellipse(50, 75, 25, 25);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Cells should be run sequentially, from top to bottom. You can get information on how to use the notebook for writing here: [Jupyter Notebook Users Manual](http://jupyter.cs.brynmawr.edu/hub/dblank/public/Jupyter%20Notebook%20Users%20Manual.ipynb).\n", "\n", "Tips:\n", "\n", "* You can press `SHIFT+TAB` after a name to get help on it\n", "* you can press `TAB` after a few letters to complete the variable or function \n", "\n", "You can create text with headings, styles, and even create equations, like:\n", "\n", "$$ \\left(\\!\n", " \\begin{array}{c}\n", " n \\\\\n", " r\n", " \\end{array}\n", " \\!\\right) = \\frac{n!}{r!(n-r)!} $$\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 2.2 Processing" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Processing is a programming language. You write programs as \"sketches.\" Each sketch goes into a Jupyter cell.\n", "\n", "The **syntax** of the Processing language is a subset of the Java programming language. " ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 3. Functions" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Functions to explore:\n", "\n", "* size(width, height)\n", "* point(x, y)\n", "* line(x1, y1, x2, y2)\n", "* triangle(x1, y1, x2, y2, x3, y3)\n", "* rect(x, y, w, h)\n", "* quad(x1, y1, x2, y2, x3, y3, x4, y4)\n", "* ellipse(x, y, w, h)\n", "\n", "All of the shapes are listed at [processingjs.org/reference](http://processingjs.org/reference)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "When done, Save the Sketch, and click on the Submit button in the toolbar. Select **dsblank**, and **CS110-Practice-Sep-7**.\n", "\n", "You can also click on the Publish . That will give you a URL that you can share with friends and family." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 4. Workflow" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "1. Before you login (or after you logout), go to [jupyter.brynmawr.edu](https://jupyter.brynmawr.edu)\n", "2. Click the link for this, opening in a new tab\n", "3. Go back to the login page and login" ] } ], "metadata": { "kernelspec": { "display_name": "Calysto Processing", "language": "java", "name": "calysto_processing" }, "language_info": { "codemirror_mode": { "name": "text/x-java", "version": 2 }, "file_extension": ".java", "mimetype": "text/x-java", "name": "java" } }, "nbformat": 4, "nbformat_minor": 1 }